<template>
  <div class="homne">
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="con">
      <div class="con-wrap" v-for="item1 in homeData" :key="item1.cateId">
        <div class="con-title">{{ item1.cateName }}</div>
        <div class="content-wrap">
          <div
            class="con-content"
            v-for="item2 in item1.cateData"
            :key="item2.name"
            @click="toDetail(item2)"
          >
            <div class="content-name">{{ item2.name }}</div>
            <div class="content-img">
              <img :src="item2.img" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import router from '@/router/index'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const images = [
      'https://i.loli.net/2021/12/03/d9EpW2uBZfG3nV1.jpg',
      'https://i.loli.net/2021/12/03/yk3HG7zcVwTuW8S.jpg',
      'https://i.loli.net/2021/12/03/j84SAraYWe1lh7d.jpg',
      'https://i.loli.net/2021/12/03/xL7kafWBM6oJ9RE.jpg'
    ]
    const state = reactive({
      homeData: []
    })
    const getHomeData = () => {
      proxy.$axios.get('/homedata').then((res) => {
        state.homeData = res.dataList
        localStorage.setItem('lists', JSON.stringify(res.dataList))
      })
    }
    if (localStorage.getItem('lists')) {
      state.homeData = JSON.parse(localStorage.getItem('lists'))
    } else {
      getHomeData()
    }
    const toDetail = (goods) => {
      if (localStorage.getItem('isLogin')) {
        router.push({ path: 'Detail', query: goods })
      } else {
        proxy.$toast('请先登录')
        setTimeout(() => {
          router.push('/login')
        }, 500)
      }
    }
    return {
      images,
      ...toRefs(state),
      getHomeData,
      toDetail
    }
  }
}
</script>
<style scoped>
.home {
  height: 100vh;
  overflow-y: scroll;
}
.van-swipe-item {
  height: 240px;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
.con {
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.con-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.con-title {
  width: 100%;
  color: rebeccapurple;
  padding: 0.625rem;
  font-size: 1.375rem;
  margin-left: 0.625rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-bottom: 0.625rem;
}
.content-wrap {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0.625rem 0.9375rem;
}
.con-content {
  width: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.content-name {
  width: 6.25rem;
  font-size: 0.875rem;
  color: #ccc;
  padding: 0.625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-img {
  width: 6.25rem;
  height: 6.25rem;
}
.content-img img {
  width: 100%;
  height: 100%;
}
</style>
